<style lang="less">

</style>
<template>
    <Modal
        v-model="drawer.show" transfer
        :title="lang.new"
        :width="width"
        class-name="cm-modal-resize"
        :z-index="zIndex"
        :draggable="true"
        :closable="true"
        :mask-closable="false"
        @on-ok="ok">
        <span slot="header" :style="titleStyle">{{lang.select }}</span>
        <div v-if="drawer.show" class="cm-modal-content">
            <selectModalContentOpt
                :formColumns="formColumns"
                :columns="columns"
                :moreColumn="moreColumn"
                :modelType="modelType"
                :type="type"
                :className="className"
                :cols="cols"
                :isSingleCheck="isSingleCheck"
                :selectionData="selectionData"
                :selfSelectFilter="selfSelectFilter"
                :sqlOr="sqlOr"
                @handleSelectChange="handleSelectChange"
                @handleSingCheckChange="handleSingCheckChange"
            ></selectModalContentOpt>
        </div>
        <template slot="footer">
            <!-- 对于具有验证，点击提交不能消失的对话框，必须使用这种插槽的用法 -->
            <Button type="text" @click="cancel">{{lang.cancel}}</Button>
            <Button type="primary" @click="ok">{{lang.save}}</Button>
      </template>
    </Modal>
</template>
<script>
    import selectModalContentOpt from './selectModalContentOpt.vue';
    export default {
        components: { selectModalContentOpt },
        data () {
            return {
                selection: [],
                singCheck: []
            }
        },
        props: {
            modelType: {
                default: () => {
                    return '';
                }
            },
            type: {
                default: () => {
                    return '';
                }
            },
            className: {
                default: () => {
                    return '';
                }
            },
            cols: {
                default: () => {
                    return 2;
                }
            },
            width: {
                default: () => {
                    return 1024;
                }
            },
            zIndex: {
                default: () => {
                    return 100;
                }
            },
            titleStyle: {
                default: () => {
                    return {}
                }
            },
            drawer: {
                default: () => {
                    return {
                        show: false
                    };
                }
            },
            isSingleCheck: {
                default: () => {
                    return false;
                }
            },
            formColumns: {
                default: () => {
                    return [];
                }
            },
            columns: {
                default: () => {
                    return [];
                }
            },
            moreColumn: {
                default: () => {
                    return {};
                }
            },
            rules: {
                default: () => {
                    return {};
                }
            },
            selectionData: {
                default: () => {
                    return [];
                }
            },
            selfSelectFilter: {
                default: () => {
                    return [];
                }
            },
            sqlOr: {
                default: () => {
                    return '';
                }
            }
        },
        computed: {
            labelWidth () {
                return 100;
            },
            labelPosition () {
                return 'right';
            },
            lang () {
                return {
                    'en-US': {
                        edit: 'edit',
                        new: 'new',
                        detail: 'detail',
                        action: 'action',
                        submit: 'submit',
                        cancel: 'cancel',
                        save: 'save',
                        select: 'select',
                        search: 'search',
                        reset: 'reset'
                    },
                    'zh-CN': {
                        edit: '编辑',
                        new: '添加',
                        detail: '查看',
                        action: '操作',
                        submit: '提交',
                        cancel: '取消',
                        save: '确定',
                        select: '选择',
                        search: '查询',
                        reset: '重置'
                    }
                }[this.G_Locale]
            }
        },
        watch: {
            'drawer.show': function () {
                if (this.drawer.show) {
                    this.selection = this.tools.lodash.cloneDeep(this.selectionData);
                    this.singCheck = this.isSingleCheck ?  this.selection : []
                }
            }
        },
        methods: {
            /**
             * 提交添加或修改数据
             */
            ok () {
                if (this.isSingleCheck) {
                    this.$emit('submitSingleCheck', this.singCheck);
                } else {
                    this.$emit('submit', this.selection);
                }
            },
            cancel(){
                this.drawer.show=false
                if (this.isSingleCheck) {
                    this.$emit('submitSingleCheck', this.selectionData);
                } else {
                    this.$emit('submit', this.selectionData);
                }
            },
            handleSelectChange (selection) {
                this.selection = selection;
            },
            handleSingCheckChange (selection) {
                this.singCheck = selection;
            }
        }
    }
</script>
